<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="WebRTC code samples">
    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
    <meta itemprop="description" content="Client-side WebRTC code samples">
    <meta itemprop="name" content="WebRTC code samples">
    <meta name="mobile-web-app-capable" content="yes">
    <meta id="theme-color" name="theme-color" content="#ffffff">
    <base target="_blank">
    <title>MediaStream Recording</title>
</head>
<body>
<div id="container">
    <h1>
        <span>WebRTC实例-媒体录制器</span></h1>
    <video id="gum" playsinline autoplay muted></video>
    <video id="recorded" playsinline loop></video>
    <div>
        <button id="start">打开摄像头</button>
        <button id="record" disabled class="off">开始录像</button>
        <button id="play" disabled>播放</button>
        <button id="download" disabled>下载</button>
		<button id="close" >关闭摄像头</button>
    </div>
    <div>
        <h4>媒体流约束选项：</h4>
        <p>消除回声: <input type="checkbox" id="echoCancellation"></p>
    </div>
    <div>
        <span id="errorMsg"></span>
    </div>
</div>
<script async>
	//*******************************************打开摄像头*********************************************
	//打开摄像头事件
	document.querySelector('button#start').addEventListener('click', async () => {
	  const hasEchoCancellation = document.querySelector('#echoCancellation').checked;//消除回声
	  const constraints = {//1.定义网页视频对象
	    audio: {
	      echoCancellation: {exact: hasEchoCancellation}
	    },
	    video: {
	      width: 1280, height: 720
	    }
	  };
	  console.log('Using media constraints:', constraints);
	  await init(constraints);//2.初始化视频对象:获取流,并赋值给video#gum标签
	});
	//初始化函数        getUserMedia({媒体对像},onSuccess成功回调,onError失败回调)
	async function init(constraints) {
	  try {
	    const stream = await navigator.mediaDevices.getUserMedia(constraints);//获取流的起点
	    handleSuccess(stream);
	  } catch (e) {
	    console.error('navigator.getUserMedia error:', e);
	    errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.toString()}`;
	  }
	}
	//设置媒体流给gumVideo标签
	function handleSuccess(stream) {
	  recordButton.disabled = false;
	  console.log('getUserMedia() got stream:', stream);
	  window.stream = stream;
	  const gumVideo = document.querySelector('video#gum');
	  gumVideo.srcObject = stream;
	}
//******************************************初始化变量********************************************
'use strict';
let mediaRecorder;  // 录像工具对像-录像机
let recordedBlobs;  // 保存录像
let sourceBuffer;
const errorMsgElement = document.querySelector('span#errorMsg');
const recordedVideo = document.querySelector('video#recorded');
const recordButton = document.querySelector('button#record');
const playButton = document.querySelector('button#play');
const downloadButton = document.querySelector('button#download');
const closeButton = document.querySelector('button#close');
var track;

closeButton.addEventListener('click', () => {
	console.log(mediaSource);
	if (window.stream) {
	    window.stream.getTracks().forEach(track => {
	          track.stop();
	    });
	}
});
//*********************************************开始录像*******************************************
//开始录像事件
recordButton.addEventListener('click', () => {
    if (recordButton.className === 'off') {
    startRecording();
  } else {
    stopRecording();
    recordButton.textContent = '开始录像';
    recordButton.className = 'off';
    playButton.disabled = false;
    downloadButton.disabled = false;
  }
});
//录像函数
function startRecording() {
  recordedBlobs = []; // 清空录像内容
  let options = {mimeType: 'video/webm;codecs=vp9'};
  if (!MediaRecorder.isTypeSupported(options.mimeType)) { //不支持video/webm;codecs=vp9
    console.error(`${options.mimeType} is not Supported`);
    errorMsgElement.innerHTML = `${options.mimeType} is not Supported`;
    options = {mimeType: 'video/webm;codecs=vp8'};
      if (!MediaRecorder.isTypeSupported(options.mimeType)) {//不支持video/webm;codecs=vp8
      console.error(`${options.mimeType} is not Supported`);
      errorMsgElement.innerHTML = `${options.mimeType} is not Supported`;
      options = {mimeType: 'video/webm'};
        if (!MediaRecorder.isTypeSupported(options.mimeType)) {//不支持video/webm;
        console.error(`${options.mimeType} is not Supported`);
        errorMsgElement.innerHTML = `${options.mimeType} is not Supported`;
        options = {mimeType: ''};
      }
    }
  }
  try {
    mediaRecorder = new MediaRecorder(window.stream, options);// 创建录像机
  } catch (e) {
    console.error('Exception while creating MediaRecorder:', e);
    errorMsgElement.innerHTML = `Exception while creating MediaRecorder: ${JSON.stringify(e)}`;
    return;
  }
  console.log('Created MediaRecorder', mediaRecorder, 'with options', options);
  recordButton.textContent = '停止录像';
  recordButton.className = 'on';  //修改播放标志
  playButton.disabled = true;
  downloadButton.disabled = true;
  mediaRecorder.onstop = (event) => {//指定停止信息提示
    console.log('Recorder stopped: ', event);
  };
  mediaRecorder.ondataavailable = handleDataAvailable;
  mediaRecorder.start(10); // collect 10ms of data,收集10s数据
  console.log('MediaRecorder started', mediaRecorder);
}
//保存数据到 recordedBlobs
function handleDataAvailable(event) {
  if (event.data && event.data.size > 0) {
    recordedBlobs.push(event.data);
  }
}
//停止录像函数
function stopRecording() {
  mediaRecorder.stop();
  console.log('Recorded Blobs: ', recordedBlobs);
}


//*********************************************播放、下载录像*******************************************
//播放事件
playButton.addEventListener('click', () => {
  const superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});// 读取录像
  recordedVideo.src = null;
  recordedVideo.srcObject = null;
  recordedVideo.src = window.URL.createObjectURL(superBuffer); //赋值给video#recorded
  recordedVideo.controls = true;
  recordedVideo.play(); // 播放
});
//下载事件
downloadButton.addEventListener('click', () => {
  const blob = new Blob(recordedBlobs, {type: 'video/webm'});
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');// 创建a标签
  a.style.display = 'none';
  a.href = url;
  a.download = 'test.webm';// 保存为 test.webm
  document.body.appendChild(a);
  a.click(); //下载
  setTimeout(() => {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  }, 100);//下载结束0.1秒后删除a标签
});

//创建MediaSource对象,没有与其它发生关系
const mediaSource = new MediaSource();
mediaSource.addEventListener('sourceopen', handleSourceOpen, false);
//打开媒体函数
function handleSourceOpen(event) {
  console.log('MediaSource opened');
  sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"');
  console.log('Source buffer: ', sourceBuffer);
}



</script>
<style>
 .hidden {
  display: none;
}
.highlight {
  background-color: #eee;
  font-size: 1.2em;
  margin: 0 0 30px 0;
  padding: 0.2em 1.5em;
}
.warning {
  color: red;
  font-weight: 400;
}
@media screen and (min-width: 1000px) {
  /* hack! to detect non-touch devices */
  div#links a {
    line-height: 0.8em;
  }
}
audio {
  max-width: 100%;
}
body {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  margin: 0;
  padding: 1em;
  word-break: break-word;
}
button {
  background-color: #d84a38;
  border: none;
  border-radius: 2px;
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 0.8em;
  margin: 0 0 1em 0;
  padding: 0.5em 0.7em 0.6em 0.7em;
}
button:active {
  background-color: #2fcf5f;
}
button:hover {
  background-color: #cf402f;
}
button[disabled] {
  color: #ccc;
}
button[disabled]:hover {
  background-color: #d84a38;
}
canvas {
  background-color: #ccc;
  max-width: 100%;
  width: 100%;
}
code {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
div#container {
  margin: 0 auto 0 auto;
  max-width: 60em;
  padding: 1em 1.5em 1.3em 1.5em;
}
div#links {
  padding: 0.5em 0 0 0;
}
h1 {
  border-bottom: 1px solid #ccc;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  margin: 0 0 0.8em 0;
  padding: 0 0 0.2em 0;
}

h2 {
  color: #444;
  font-weight: 500;
}

h3 {
  border-top: 1px solid #eee;
  color: #666;
  font-weight: 500;
  margin: 10px 0 10px 0;
  white-space: nowrap;
}
li {
  margin: 0 0 0.4em 0;
}
html {
  overflow-y: scroll;
}
img {
  border: none;
  max-width: 100%;
}
input[type=radio] {
  position: relative;
  top: -1px;
}
p#data {
  border-top: 1px dotted #666;
  font-family: Courier New, monospace;
  line-height: 1.3em;
  max-height: 1000px;
  overflow-y: auto;
  padding: 1em 0 0 0;
}
section p:last-of-type {
  margin: 0;
}
section {
  border-bottom: 1px solid #eee;
  margin: 0 0 30px 0;
  padding: 0 0 20px 0;
}
section:last-of-type {
  border-bottom: none;
  padding: 0 0 1em 0;
}
select {
  margin: 0 1em 1em 0;
  position: relative;
  top: -1px;
}
video {
  background: #222;
  margin: 0 0 20px 0;
  --width: 100%;
  width: var(--width);
  height: calc(var(--width) * 0.75);
}
@media screen and (max-width: 450px) {
  h1 {
    font-size: 20px;
  }
}
 button {
  margin: 0 3px 10px 0;
  padding-left: 2px;
  padding-right: 2px;
  width: 99px;
}

button:last-of-type {
  margin: 0;
}

p.borderBelow {
  margin: 0 0 20px 0;
  padding: 0 0 20px 0;
}
video {
  vertical-align: top;
  --width: 25vw;
  width: var(--width);
  height: calc(var(--width) * 0.5625);
}
video:last-of-type {
  margin: 0 0 20px 0;
}
video#gumVideo {
  margin: 0 20px 20px 0;
}
</style>
</body>
</html>